<div class="transfer-form-warper">
  <form nz-form nzLayout="vertical" [formGroup]="transferForm" >
    <nz-form-item>
      <nz-form-label nzRequired="true" nzFor="address">
        <label for="">收款地址</label>
        {{transferForm.get('address').value | userWithdrawalAddress: userWithdrawalAddressMobiles}}</nz-form-label>
      <nz-form-control nzValidateStatus="transferForm.get('address')" nzHasFeedback>
        <ng-container *ngIf="userWithdrawalAddressMobiles && userWithdrawalAddressMobiles.length > 0">
          <input 
            nz-input 
            formControlName="address" 
            (blur)="onChange(address.value)" 
            name="address" 
            [nzAutocomplete]="auto" 
            placeholder="请输入收款地址"
          >
          <nz-autocomplete #auto>
            <nz-auto-option class="address-list-auto-option" 
              *ngFor="let userWithdrawalAddressMobile of autocompleteUserWithdrawalAddressMobilesDatasource"
              [nzValue]="userWithdrawalAddressMobile.tag" [nzLabel]="userWithdrawalAddressMobile.address">
              <div class="address-list-div">
                <p>
                  {{ userWithdrawalAddressMobile?.tag}}
                </p>
                <p>
                  {{ userWithdrawalAddressMobile?.address }}
                </p>
              </div>
            </nz-auto-option>
          </nz-autocomplete>
        </ng-container>
        <ng-container *ngIf="!(userWithdrawalAddressMobiles && userWithdrawalAddressMobiles.length > 0)">
          <input nz-input formControlName="address" name="address" [nzAutocomplete]="auto" placeholder='请输入收款地址'>
          <nz-autocomplete #auto>
            <nz-auto-option class="add-bank-auto-option" (click)="addBank()" nzValue="" nzLabel="">
              <div class="add-bank-div">
                <i class="fa fa-plus" aria-hidden="true"></i>
                <span>请新建收款地址</span>
              </div>
            </nz-auto-option>
          </nz-autocomplete>
        </ng-container>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired="true" nzFor="amount">
        <label for="">转账金额</label></nz-form-label>
      <nz-form-control nzValidateStatus="amount" nzHasFeedback>
        <!-- <nz-input-number formControlName="amount" name="amount"></nz-input-number> -->
        <input nz-input [(ngModel)]="_amount" formControlName="amount" name="amount" type="number" placeholder="请输入转账金额">
        <nz-form-explain *ngIf="amount.invalid && (amount.dirty || amount.touched)">
          <ng-container *ngIf="amount.errors.required">
            请输入转账金额
          </ng-container>
          <ng-container *ngIf="amount.errors.max">
            转账金额超过余额
          </ng-container>
          <ng-container *ngIf="amount.errors.min">
            转账金额不能低于： {{ resWalletBalance.coin.withdrawalMinAmount }}
          </ng-container>
          <ng-container  *ngIf="amount.errors?.yeError && (amount.touched || amount.dirty)" >
            余额不足
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <div class="transfer-form-wallet">
        <div class="pull-left text-left">
          <p>余 额: {{resWalletBalance?.availableBalance}}</p>
          <p *ngIf='internal == "Y"'>手续费: {{poundage}}</p>
          <p *ngIf='internal == "N"'>手续费: {{innerpoundage}}</p>
        </div>
        <div class="pull-right">
          <a class="all" (click)="addAll(amount)">全部</a>
        </div>
      </div>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired="true" nzFor="fundPwd">
        <label for="">支付密码</label></nz-form-label>
      <nz-form-control nzValidateStatus="transferForm.get('fundPwd')" nzHasFeedback>
        <input nz-input formControlName="fundPwd" name="fundPwd" type="password">
        <!-- <nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain> -->
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button class="submit" nzType="primary" type="submit" [disabled]="transferForm.invalid " (click)="onSubmit()">确认转帐</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>




<nz-modal nzWidth="466px" class="banks-from" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent"
  [nzFooter]="null" [nzClosable]='false' (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    <h4>添加新地址</h4>
  </ng-template>

  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm">

      <nz-form-item>
        <nz-form-label [nzSpan]="24">币名称</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          {{coin.coinName}}
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>地址</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          <input nz-input formControlName="address" placeholder="请输入地址" nzRequired>
          <nz-form-explain style="color:red"
            *ngIf="validateForm.get('address').dirty&&validateForm.get('address').errors">
            <ng-container *ngIf="validateForm.get('address').hasError('required')">
              请输入地址
            </ng-container>
            <ng-container *ngIf="validateForm.get('address').hasError('pattern')">
              地址格式错误
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>备注</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          <textarea nz-input formControlName="tag" placeholder="请输入备注" nzRequired></textarea>
          <nz-form-explain style="color:red" *ngIf="validateForm.get('tag').dirty&&validateForm.get('tag').errors">
            <ng-container *ngIf="validateForm.get('tag').hasError('required')">
              请输入备注
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

    </form>
    <div class="from-footer">
      <button nz-button [disabled]="!validateForm.valid" nzType="default"
        (click)="handleOk(validateForm.value)">确认</button>
      <button nz-button nzType="primary" (click)="handleCancel()" [nzLoading]="isConfirmLoading">取消</button>
    </div>
  </ng-template>
</nz-modal>